<template>
  <div class="wrapper">
    <div id="title" @click="toDashboard">全部模块</div>
    <div style="background-color: #ffff;border-top: 1px #dddddd solid">
      <div style="width: 90%; margin: 0 auto;">
    <div v-for="(menu,index) in routes" :key="index" @click.stop="handleClick(menu)" >
      <div v-if="!menu.hidden" class="first-level" :class="{ selectedLevel: currentColumnId === menu.name }">
        <div style="line-height: 14px; height: 14px">
          <component
            class="menu-icon"
            v-if="menu.meta"
            theme="outline"
            size="16"
            strokeWidth="3"
            :is="menu.meta.icon"
          />
          {{ menu.meta?.title || menu.menuName }}
        </div>
        <img
          v-if="menu.children && menu.children.length > 0"
          class="chevron_right"
          src="@/assets/chevron_right.svg"
          alt=""
        />
      </div>
    </div>
  </div>
  </div>
  </div>
</template>

<script setup>

import { useRouter } from 'vue-router'
import { useStore } from 'vuex';
import { ref } from 'vue';
const router = useRouter()
const store = useStore();
// const menuList = computed(() => {
//   return userStore.menuList
// })
// const currentColumnId = computed(() => {
//   return userStore.currentColumnId
// })
const routes = computed(() => {
    return store.getters['routes/apiRoutes'];
  });
  const currentColumnId = computed(() => {
    return store.getters['routes/currentColumnId'];
  });
  const isOpend2 = computed(() => {
    return store.getters['routes/isOpend2'];
  });
  
function handleClick(menu) {
  //router.push({ name: menu.name })
  store.commit('routes/api2Routes',menu.children==undefined?[]: menu.children)
  if(menu.children==undefined){
    store.commit('routes/setIsOpend',false)
    router.push({ name: menu.name });
    return;
  }
    if(menu.name===currentColumnId.value){
    store.commit('routes/setIsOpen2',!isOpend2.value)
    }else{
      store.commit('routes/setIsOpen2',true)

    }
    store.commit('routes/setCurrentColumnId', menu.name)
  
  
  //userStore.setCurrentColumnId(menu?.menuId || null)

}
function toDashboard() {
  // appStore.setCurrentModule('dashboard')
  router.push({ name: 'dashboard' })
  appStore.closeDrawerBar()
}
</script>

<style lang="scss" scoped>
.wrapper {
  width: 230px;
  position: absolute;
  // padding: 8px;
  // height: calc(100vh - 64px);
   height: 100vh;
  // margin-left: 12px;
  background-color: #fff;
  border-right: 1px solid #dddddd;

  #title {
    height: 60px;
    // width: 200px;
    padding-left: 19px;
    font-size: 16px;
    font-weight: bold;
    color: #000000;
    line-height: 60px;
    cursor: pointer;
  }

  .first-level {
    display: flex;
    position: relative;
    align-items: center;
    width:100%;
    height: 40px;
    font-size: 14px;
    font-weight: 400;
    color: #222222;
    // margin-left: 10px;
    border-radius: 4px;

    cursor: pointer;

    .levelImg {
      width: 40px;
      height: 40px;
    }

    .chevron_right {
      position: absolute;
      right: 10px;
      width: 16px;
      height: 16px;
    }
  }

  .first-level:hover {
    background: #f2f5ff;
    color: #7ea7ff;
  }
// 文字：#7ea7ff;
// 背景：#f2f5ff
  .selectedLevel {
    background: #f2f5ff;
    color: #7ea7ff;
  }
}
</style>
